

<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>Docker信息</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 信息面板 -->
        <el-card class="cardBox">
            <!-- 标题 -->
            <div slot="header" class="clearfix">
                <span style="font-weight: bold; font-size: large;">Docker主机信息</span>

            </div>
            <!-- 容器镜像信息 -->
            <el-row :gutter="20" style="margin-top: 20px; margin-bottom: 20px;">
                <el-col :span="6">
                    <div>
                        <el-statistic :value="infoData.containers" title="总容器数量"></el-statistic>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div>
                        <el-statistic title="总镜像数量">
                            <template slot="formatter">
                                {{ infoData.images }}
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div>
                        <el-statistic title="容器Runing">
                            <template slot="formatter">

                                {{ infoData.containersRunning }} -
                                <el-icon class="el-icon-video-play"></el-icon>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div>
                        <el-statistic title="容器Pause">
                            <template slot="formatter">
                                {{ infoData.containersPaused }} -
                                <el-icon class="el-icon-video-pause"></el-icon>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div>
                        <el-statistic title="容器Stopping">
                            <template slot="formatter">
                                {{ infoData.containersStopped }} -
                                <el-icon class="el-icon-circle-close"></el-icon>
                            </template>
                        </el-statistic>
                    </div>
                </el-col>
            </el-row>
            <!-- 基本统计信息 -->
            <el-descriptions class="margin-top" title="基本信息" :column="4" :size="size" border>
                <template slot="extra">
                    <el-button type="primary" size="small">禁止</el-button>
                </template>
                <el-descriptions-item>
                    <template slot="label">
                        <!-- <i class="el-icon-user"></i> -->
                        Docker主机名称
                    </template>
                    {{ infoData.docker.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        主机IP
                    </template>
                    {{ infoData.docker.host }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        主机端口
                    </template>
                    {{ infoData.docker.port }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        活跃状态
                    </template>
                    <el-tag size="small" type="success" v-if="infoData.alive == true">在线</el-tag>
                    <el-tag size="small" type="danger" v-else>掉线</el-tag>
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        账号
                    </template>
                    {{ infoData.docker.username }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        密码
                    </template>
                    {{ infoData.docker.password }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        类型
                    </template>
                    <el-tag size="small" type="info">{{ infoData.docker.type }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        创建时间
                    </template>
                    {{ infoData.docker.createTime }}
                </el-descriptions-item>
            </el-descriptions>
            <el-divider />
            <!-- 主机系统信息 -->
            <el-descriptions class="margin-top" title="系统信息" :column="5" :size="size" border>
                <el-descriptions-item>
                    <template slot="label">
                        体系结构
                    </template>
                    {{ infoData.architecture }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        内核版本
                    </template>
                    {{ infoData.kernelVersion }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        系统平台
                    </template>
                    {{ infoData.osType }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        操作系统
                    </template>
                    {{ infoData.operatingSystem }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        api版本
                    </template>
                    {{ infoData.apiVersion }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        go版本
                    </template>
                    {{ infoData.goVersion }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        搭建时间
                    </template>
                    {{ infoData.buildTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        Root目录
                    </template>
                    {{ infoData.dockerRootDir }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        总内存(M)
                    </template>
                    {{ infoData.memTotal }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        总CPU(C)
                    </template>
                    {{ infoData.cpu }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        唯一标识
                    </template>
                    {{ infoData.id }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
    </div>
</template>

<script>
import { dockerInfoByKey } from '../../api/userMG';

export default {
    name: "DockerCLient",
    data() {
        return {
            key: 0,
            infoData: {},
        };
    },

    methods: {
        getBaseData() {
            if (this.key == 0) {
                return;
            }
            var parmas = "key=" + this.key
            dockerInfoByKey(parmas).then(res => {
                if (res.code == 0) {
                    this.infoData = res.data
                } else {
                    this.$massage.error(res.msg)
                }
            })
        },
    },
    created() {
        this.key = this.$route.query.key
        this.getBaseData()
    },
};
</script>
<style scoped>
.cardBox {
    margin-top: 30px;
    width: 95%;
    height: 100%;
    margin-left: 1%;
}
</style>
